<template>
	<view class="pages">
		<!--
		 <classify></classify>
		
		 -->
		 
		<swiper class="swiper-body" :observer="true" :observeParents="true" :current="currentTab" :style="{height:swiperHeight+'px'}" @change="swiperTab">
			<swiper-item>	
				<home class="home box" :class="currentTab == 0?'main':''" :display='currentTab'></home><!--   -->
			</swiper-item>	
			<swiper-item>
				<classify class="classify box" :class="currentTab == 1?'main':''" :display='currentTab'></classify><!--   -->
			</swiper-item>
			<swiper-item>
				<album class="album box" :class="currentTab == 2?'main':''" :display='currentTab'></album><!--   -->
			</swiper-item>
			<swiper-item>
				<mine class="mine box" :class="currentTab == 3?'main':''" :display='currentTab'></mine><!--   -->
			</swiper-item>
			
		</swiper>
		
		
		
		
		<view class="tabbar-box" :style="{bottom: 16 + deviceInfo.bottomSafeAreaHeight +'px'}">
			<image class="tabbar-image" mode="aspectFit" @click="changeCurrentTab" :id="index" v-for="(item,index) in tabbar" :key="index" :src="currentTab==index?item.selectedIconPath:item.iconPath"></image>
		</view>
	</view>
</template>

<script>
	//import Vue from 'vue'
	import home from '../home/home.vue'
	import mine from '../mine/mine.vue'
	import classify from '../classify/classify.vue'
	import album from '../album/album.vue'
	export default {
		data() {
			return {
				scrollTop: 0,
				deviceInfo: {},
				currentTab:0,
				swiperHeight:0,
				displayMine:0,
				SystemInfo:uni.getSystemInfoSync(),
				tabbar:[
					{	
						'className':"home",
						'iconPath':'../../static/tabbar/home0.png',
						'selectedIconPath':'../../static/tabbar/home1.png',
					},
					{
						'className':"classify",
						'iconPath':'../../static/tabbar/classify0.png',
						'selectedIconPath':'../../static/tabbar/classify1.png',
					},
					{	
						'className':"album",
						'iconPath':'../../static/tabbar/album0.png',
						'selectedIconPath':'../../static/tabbar/album1.png',
					},
					{
						'className':"mine",
						'iconPath':'../../static/tabbar/mine0.png',
						'selectedIconPath':'../../static/tabbar/mine1.png',
					},
				]
			}
			
		},
		components: {
			home,mine,classify,album
		},
		onLoad:function(data){
			this.deviceInfo = JSON.parse(JSON.stringify(uni.getStorageSync('deviceInfo')))
			//console.log(this.deviceInfo,'-------')
			var onPage = data.page != 'undefined' && data.page > -1 ? data.page : 0
			console.log(onPage,data.page)
			let that = this
			if(onPage > -1){
				that.currentTab = onPage
				that.tabbar[onPage].isLoader = 1
			}else{
				that.currentTab = 0
				that.tabbar[0].isLoader = 1
			}
			that.setSwiperHeight()
			setTimeout(function(){
				that.setSwiperHeight()
			},1000)
			uni.$on('updateSwiperHeight',function(data){
			    console.log("SwiperHeight","XiaoWang");
				setTimeout(function(){
					that.setSwiperHeight()
				},1000)
			})
		},
		created:function() {
			uni.createIntersectionObserver(this).relativeToViewport().observe('.top-empty',function(e){
				 e.intersectionRatio > 0 ? this.scrollTop = 0 : this.scrollTop = 1000;
			})
			
		},
		methods: {
			swiperTab:function(e){
				this.currentTab = e.detail.current
				this.setSwiperHeight()
			},
			setSwiperHeight:function(e){
				let query = uni.createSelectorQuery().in(this);
				query.selectAll("."+this.tabbar[this.currentTab].className).boundingClientRect();
				console.log(query.select("."+this.tabbar[this.currentTab].className))
				query.exec((res) => {
					this.swiperHeight = res[0][0].height;
					console.log(res[0][0].height)
				})
			},
			changeCurrentTab:function(e){
				this.currentTab = e.target.id
			},
			
		
		},
		onShareAppMessage:function(){
			return {
			    title: 'test',
			    path: 'pages/index/index'
			  }
		}
		
		
	}
	
	
</script>

<style>
.swiper{
		height: 550px;
		max-width: 100vw;
}
.index-page {
    width: 750rpx;
    background-image: url();
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.top-empty {
    width: 750rpx;
    height: 80rpx;
    background-color: transparent;
}

.logo-box-image {
    width: 55rpx;
    height: 55rpx;
}
.top-search-box{
    width: 750rpx;
    height: 88rpx;
    background-color: rgba(20,20,20,.8);
    backdrop-filter: blur(10px);
    position: fixed;
    z-index: 999;
}

.search-item{
    width: 690rpx;
    height: 76rpx;
    background: hsla(0,0%,100%,.06);
    border-radius: 44rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.search-options{
    width: 100rpx;
    height: 76rpx;
}

.search-options-text{
    color: hsla(0,0%,66.7%,.65);
    font-size: 26rpx;
}

.search-options-line{
    width: 1px;
    height: 28rpx;
    background-color: hsla(0,0%,43.9%,.25);
}

.search-icon{
    width: 44rpx;
    height: 44rpx;
    opacity: .65;
}

.input-self{
    height: 76rpx;
    -webkit-box-flex: 1;
    flex: 1;
    font-size: 26rpx;
    color: #fff;
    padding-left: 20rpx;
    padding-right: 20rpx;
}

.classify-title{
    font-size: 44rpx;
    color: #fff;
    font-family: titleFont;
}

.classify-title-box{
    width: 750rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-top: 50rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.classify-color-box{
    display: flex;
    flex-wrap: wrap;
}

.classify-color-item{
    width: 150rpx;
    height: 90rpx;
    margin-top: 40rpx;
}

.classify-color-image{
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
}

.classify-right-option{
    width: 194rpx;
    height: 66rpx;
    background: hsla(0,0%,100%,.08);
    border-radius: 40rpx;
}

.classify-right-option-icon{
    width: 32rpx;
    height: 32rpx;
}

.classify-right-option-text{
    font-size: 26rpx;
    color: #bfbfbf;
    margin-left: 10rpx;
}

.classify-box{
    width: 750rpx;
    padding: 30rpx;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.classify-item{
    width: 335rpx;
    height: 195rpx;
    border-radius: 6rpx;
    background-color: #000;
    margin-bottom: 20rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    align-items: flex-end;
}

.classify-item-name-box{
    height: 44rpx;
    min-width: 142rpx;
    border-radius: 44rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    background-color: hsla(0,0%,63.5%,.3);
    backdrop-filter: blur(10px);
    margin-bottom: 10rpx;
    font-size: 24rpx;
    color: #fff;
}

.ratio-box{
    width: 750rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-top: 40rpx;
}

.ratio-box-left,.ratio-box{
    height: 544rpx;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.ratio-box-left{
    width: 330rpx;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.pc-box{
    height: 194rpx;
    background-image: url(https://wallpaper.senlinjimore.com/images/pc.jpg);
}

.pad-box,.pc-box{
    width: 330rpx;
    border-radius: 12rpx;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    align-items: flex-end;
}

.pad-box{
    height: 330rpx;
    background-image: url(https://wallpaper.senlinjimore.com/images/pad.jpg);
}

.ratio-box-right{
    width: 330rpx;
    height: 544rpx;
    background-image: url(https://wallpaper.senlinjimore.com/images/phone.jpg);
    border-radius: 12rpx;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    align-items: flex-end;
}

.album-page {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}


.album-item-image,.album-item {
    width: 690rpx;
    height: 280rpx;
    border-radius: 12rpx;
}

.mine-page {
    background-image: url();
    background-repeat: no-repeat;
    background-size: 400rpx;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.mine-page,.user-info-box {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.user-info-box {
    width: 750rpx;
    padding-left: 50rpx;
    padding-right: 50rpx;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.user-info-left {
    font-size: 38rpx;
    font-weight: 700;
}

.user-info-right {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100rpx;
    overflow: hidden;
    border: 2px solid #fcbe62;
}

.vip-box {
    width: 630rpx;
    height: 140rpx;
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    margin-top: 42rpx;
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 20rpx;
}

.vip-left-box {
    width: 74rpx;
    height: 74rpx;
    background: linear-gradient(180deg,#585858,#202020);
    border-radius: 50%;
}

.vip-icon {
    width: 40rpx;
    height: 40rpx;
}

.vip-left-right {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin-left: 20rpx;
    -webkit-box-flex: 1;
    flex: 1;
}

.vip-title {
    font-size: 28rpx;
    font-weight: 700;
    color: #333;
}

.vip-notice {
    font-size: 24rpx;
    color: rgba(0,0,0,.3);
    margin-top: 10rpx;
}

.vip-right {
    padding-right: 20rpx;
    color: rgba(0,0,0,.3);
    font-size: 26rpx;
}

.my-number-box,.vip-right {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.my-number-box {
    width: 686rpx;
    height: 160rpx;
    background-color: #212121;
    border-radius: 16rpx;
}

.my-number-item {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex: 1;
}

.my-number-item-title {
    font-size: 26rpx;
    color: #686868;
}

.my-number-item-number {
    font-size: 36rpx;
    color: #fff;
    margin-top: 24rpx;
}

.my-number-item-line {
    width: 1px;
    height: 22rpx;
    background-color: rgba(0,255,255,.08);
}

.right-arrows {
    border-top: 2px solid hsla(0,0%,100%,.3);
    border-right: 2px solid hsla(0,0%,100%,.3);
}

.black-right-arrows,.right-arrows {
    width: 20rpx;
    height: 20rpx;
    transform: rotate(45deg);
    margin-right: 10rpx;
}

.black-right-arrows {
    border-top: 1px solid rgba(0,0,0,.3);
    border-right: 1px solid rgba(0,0,0,.3);
}

.tabbar-box {
    width: 504rpx;
    height: 120rpx;
    border-radius: 120rpx;
    position: fixed;
    left: calc(50% - 252rpx);
    overflow: hidden;
    background-color: rgba(20,20,20,.6);
    backdrop-filter: blur(10px);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    justify-content: space-around;
    z-index: 9999999;
}

.tabbar-image {
    width: 88rpx;
    height: 88rpx;
}
.box{
	transform: scale(0.9);
	transition: all .5s;
}
.main{
	transform: scale(1);
}
</style>
